<template>
	<div>
		<indexTitle activeBtn='2'></indexTitle>
		<view id="blogs">
			<div class="BlogItem" v-for="BlogData in recommend">
				
				<image @click="toBlogs(BlogData)" class="itemImage" :src="BlogData.images" ></image>
				<p class="itemContent">{{BlogData.title}}</p>
				<image class="head" :src="BlogData.icon" ></image>
				<p class="blogUserName">{{BlogData.name}}</p>
				
				<view @click="Like(BlogData)" class="likeImage">
					<image v-if="BlogData.isLike == false" class="like" src="../../../imgs/6.png"></image>
					<image v-if="BlogData.isLike == true" class="like" src="../../../imgs/61.png"></image>
					<p>{{BlogData.liked}}</p>
				</view>
		
			</div>
			<view style="clear: both;"></view>
		</view>
		
		<view style="clear: both;"></view>
		<view style="height: 5vw;margin-top: 10vw;"></view>
		<foot activeBtn = '1'></foot>
	</div>
</template>

<script>
import foot from "@/component/foot.vue"
import indexTitle from "@/component/indexTitle.vue"

	var recommend = null
	
	export default{
		name:'recommend',
		data() {
			return {
				recommend:recommend
			}
		},
		onLoad:function(){
			getApp().globalData.recommendIndex = 1
			uni.request({
				url: "http://" + getApp().globalData.IpAddr + "/blog/hot?current=" + getApp().globalData.recommendIndex,
				method:"GET",
				header:{	'authorization':getApp().globalData.token	},
				success:res=> {
					// console.log(res)
					if(!res.data.success) wx.showToast({	title: res.data.errorMsg,	duration: 2000	})
					else {
						getApp().globalData.recommend = res.data.data
						this.recommend = getApp().globalData.recommend
					}
				}
			})
		},
		components: {
			"foot": foot,
			'indexTitle': indexTitle
		},
		onReachBottom(){
			getApp().globalData.recommendIndex = Number(getApp().globalData.recommendIndex) +1
			console.log(getApp().globalData.recommendIndex)
			
			uni.request({
				url: "http://" + getApp().globalData.IpAddr + "/blog/hot?current=" + getApp().globalData.recommendIndex,
				method:"GET",
				header:{	'authorization':getApp().globalData.token	},
				success:res=> {
					getApp().globalData.cache = res.data.data
					var length = this.recommend.length
					for (var key  = 0 ; key < getApp().globalData.cache.length ; key ++){
							this.recommend[length + key] = getApp().globalData.cache[key]
					}
				}
			})
		},
		methods:{
			Like(BlogData){
				uni.request({
					url:"http://" + getApp().globalData.IpAddr + "/blog/like/" + BlogData.id,
					method:"PUT",
					header:{	'authorization':getApp().globalData.token	},
					success:res=> {
						if(res.data.success) {
							if(BlogData.isLike == false){
								wx.showToast({	title: '点赞成功',	duration: 1000	})
								BlogData.liked = BlogData.liked + 1
							}else{
								wx.showToast({	title: '取消点赞成功',	duration: 1000	})
								BlogData.liked = BlogData.liked - 1
							}
							BlogData.isLike = !BlogData.isLike
						}
						else wx.showToast({	title: '点赞失败',	duration: 2000	})
					}
				})
				
			},
			toBlogs(BlogData){
				getApp().globalData.goodsId = BlogData.goodsId
				getApp().globalData.NowBlogId = BlogData.id
				uni.navigateTo({	url:"/pages/ext/BlogContent"	})
			},
		}
	}
</script>

<style>
	.BlogItem{
		width: 40vw;
		height: 60vw;
		padding: 5vw;
		float: left;
	}
	.itemImage{
		width: 100%;
		height: 40vw;
	}
	.itemContent{
		text-align: center;
		max-width: 45vw;
		-webkit-line-clamp: 2;
		
	}
	
	.like{
		display: block;
		width: 5vw;
		height: 5vw;
		float: right;
		margin-top: 4vw;
	}
	.head{
		width: 7vw;
		height: 7vw;
		margin-top: 3vw;
		float: left;
	}
	.blogUserName{
		float: left;
		max-width: 15vw;
		white-space: nowrap;
		overflow: hidden;
		margin-top: 5vw;
		font-size: 10px;
	}
	.likeImage{
		font-size: 0.2vw;
		padding-right: 2vw;
		display: block;
		float: right;
	}
	.nextpage{
		width: 20vw;
		float: right;
		padding: 0px;
		margin: 5vw;
	}
</style>